<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生日快乐</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            pinkLight: '#FFEEF2',
            pinkMain: '#FF9EBB',
            pinkDark: '#FF6B9E',
            yellow: '#FFD166',
            gold: '#FFD700',      // 皇冠主色（金色）
            goldDark: '#FFB300',  // 皇冠阴影色（深金）
            cakeBrown: '#E6C2A2',
            cakeBorder: '#D4A076'
          },
          fontFamily: {
            cute: ['"Comic Sans MS"', '"Marker Felt"', 'Arial Rounded MT Bold', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .animate-balloon {
        animation: balloon 10s linear infinite;
      }
      .animate-float {
        animation: float 3s ease-in-out infinite;
      }
      .animate-flame {
        animation: flame 0.8s ease-in-out infinite alternate;
      }
      .animate-confetti {
        animation: confetti 3s ease-in-out forwards;
      }
      .cake-layer-shadow {
        box-shadow: 0 6px 0 rgba(0,0,0,0.05), inset 0 -5px 10px rgba(100,60,40,0.1);
      }
      .crown-shadow {
        filter: drop-shadow(0 3px 2px rgba(150, 120, 0, 0.3));
      }
    }

    @keyframes balloon {
      0% { transform: translateY(90vh) rotate(0deg); opacity: 1; }
      100% { transform: translateY(-30vh) rotate(720deg); opacity: 0; }
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @keyframes flame {
      0% { transform: translate(-50%, 0) scale(0.9) rotate(-3deg); }
      100% { transform: translate(-50%, 0) scale(1.1) rotate(3deg); }
    }

    @keyframes confetti {
      0% { transform: translate(-50%, 0) rotate(0deg); opacity: 1; }
      100% { 
        transform: translate(calc(-50% + var(--random-x)), calc(0 + var(--random-y))) rotate(var(--random-rotate)deg); 
        opacity: 0; 
      }
    }
  </style>
</head>
<body class="bg-gradient-to-b from-pinkLight to-pinkMain min-h-screen font-cute overflow-x-hidden relative">
  <div id="balloonContainer" class="fixed inset-0 pointer-events-none z-1"></div>

  <!-- 第一页 -->
  <div id="page1" class="relative min-h-screen flex flex-col items-center justify-center p-4 z-10 transition-opacity duration-500">
    <div class="text-center mb-6">
      <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-pinkDark text-shadow">生日快乐！</h1>
      <div class="flex justify-center gap-3 mt-2">
        <i class="fa fa-star text-yellow animate-pulse"></i>
        <i class="fa fa-gift text-pinkMain animate-pulse" style="animation-delay: 0.3s"></i>
        <i class="fa fa-heart text-pinkDark animate-pulse" style="animation-delay: 0.6s"></i>
      </div>
    </div>

    <div class="relative my-6">
      <img src="https://i.imgur.com/FA4gnHs.jpeg" 
           alt="" 
           class="w-56 h-56 md:w-64 md:h-64 rounded-full border-4 border-pinkMain animate-float shadow-lg object-cover">
      
      <!-- 皇冠（替换原有生日帽） -->
      <div id="birthdayHat" class="absolute top-[-30px] left-1/2 transform -translate-x-1/2 w-40 h-28 opacity-0 transition-all duration-500 crown-shadow">
        <svg viewBox="0 0 100 60" class="w-full h-full">
          <!-- 皇冠主体（金色） -->
          <path d="M20,50 L35,20 L45,40 L55,15 L65,40 L75,20 L80,50 Z" 
                fill="#FFD700" 
                stroke="#FFB300" 
                stroke-width="2"/>
          <!-- 皇冠底部装饰（深金色） -->
          <path d="M20,50 L80,50 L75,60 L25,60 Z" 
                fill="#FFB300" 
                stroke="#E6A800" 
                stroke-width="1"/>
          <!-- 皇冠顶部宝石（粉色） -->
          <circle cx="35" cy="20" r="4" fill="#FF6B9E" stroke="#FF4A8D" stroke-width="1"/>
          <circle cx="55" cy="15" r="5" fill="#FF6B9E" stroke="#FF4A8D" stroke-width="1"/>
          <circle cx="75" cy="20" r="4" fill="#FF6B9E" stroke="#FF4A8D" stroke-width="1"/>
          <!-- 皇冠底部小装饰（白色） -->
          <circle cx="30" cy="55" r="2" fill="white"/>
          <circle cx="40" cy="57" r="2" fill="white"/>
          <circle cx="50" cy="58" r="2" fill="white"/>
          <circle cx="60" cy="57" r="2" fill="white"/>
          <circle cx="70" cy="55" r="2" fill="white"/>
        </svg>
      </div>
    </div>

    <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl border border-pinkMain/30 max-w-md w-full text-center mb-8 shadow-md">
      <p class="text-gray-700 text-[clamp(1rem,3vw,1.25rem)] leading-relaxed">
        亲爱的吴欣雅小朋友：<br><br>
        愿你今天充满快乐与惊喜，<br>
        像只小猫一样无忧无虑，<br>
        新的一岁健康、幸福、事事顺心！<br><br>
        生日快乐！
      </p>
    </div>

    <button id="page1Btn" class="bg-pinkMain hover:bg-pinkDark text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 shadow-md text-lg">
      戴生日帽 <i class="fa fa-diamond ml-2"></i> <!-- 按钮图标改为钻石，匹配皇冠 -->
    </button>
  </div>

  <!-- 第二页 -->
  <div id="page2" class="relative min-h-screen flex flex-col items-center justify-center p-4 z-10 hidden opacity-0 transition-opacity duration-500">
    <div class="text-center mb-6">
      <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-pinkDark text-shadow">吹蜡烛啦！</h1>
      <p class="text-gray-600 mt-2 text-[clamp(0.9rem,2vw,1.1rem)]">许下美好的愿望吧～</p>
    </div>

    <!-- 蛋糕容器 -->
    <div class="relative my-6 w-full max-w-md mx-auto h-64">
      <!-- 1. 下层蛋糕（180度旋转） -->
      <div class="absolute bottom-0 left-0 right-0 h-24 bg-cakeBrown rounded-t-3xl border-4 border-cakeBorder cake-layer-shadow z-10 transform rotate0">
        <div class="flex justify-around mt-4 transform rotate-180">
          <div class="w-4 h-4 bg-pinkMain rounded-full"></div>
          <div class="w-3 h-3 bg-pinkDark rounded-full"></div>
          <div class="w-4 h-4 bg-pinkMain rounded-full"></div>
          <div class="w-3 h-3 bg-pinkDark rounded-full"></div>
          <div class="w-4 h-4 bg-pinkMain rounded-full"></div>
        </div>
      </div>
      
      <!-- 2. 中层蛋糕（上移，与下层贴合） -->
      <div class="absolute bottom-24 left-1/4 right-1/4 h-20 bg-cakeBrown rounded-t-3xl border-4 border-cakeBorder cake-layer-shadow z-20">
        <div class="flex justify-around mt-2">
          <div class="w-3 h-3 bg-yellow rounded-full"></div>
          <div class="w-2.5 h-2.5 bg-white rounded-full"></div>
          <div class="w-3 h-3 bg-yellow rounded-full"></div>
          <div class="w-2.5 h-2.5 bg-white rounded-full"></div>
        </div>
      </div>
      
      <!-- 3. 上层蜡烛 -->
      <div class="absolute bottom-44 left-1/2 transform -translate-x-1/2 z-30">
        <div class="w-6 h-20 bg-white border-2 border-gray-200 rounded-md shadow-md flex justify-center">
          <div class="w-1 h-2 bg-gray-800 mt-1"></div>
        </div>
        <div id="cakeFlame" class="absolute -top-6 left-1/2 transform -translate-x-1/2 w-8 h-12 bg-yellow rounded-full 
                                  shadow-[0_0_15px_5px_rgba(255,209,102,0.8)] animate-flame"></div>
      </div>

      <!-- 蛋糕底盘 -->
      <div class="absolute bottom-[-4px] left-[-10%] right-[-10%] h-3 bg-gray-300 rounded-full z-5"></div>
    </div>

    <button id="page2Btn" class="bg-yellow hover:bg-[#FFC833] text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 shadow-md text-lg mt-4">
      许愿吹蜡烛 <i class="fa fa-birthday-cake ml-2"></i>
    </button>

    <div id="celebrateText" class="hidden text-center mt-8">
      <h2 class="text-2xl font-bold text-pinkDark">愿望会实现的！</h2>
      <p class="text-gray-600 mt-2">祝吴欣雅小朋友生日快乐，天天开心～</p>
    </div>

    <div id="confettiContainer" class="fixed inset-0 pointer-events-none z-20"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const page1 = document.getElementById('page1');
      const page2 = document.getElementById('page2');
      const page1Btn = document.getElementById('page1Btn');
      const page2Btn = document.getElementById('page2Btn');
      const birthdayHat = document.getElementById('birthdayHat');
      const cakeFlame = document.getElementById('cakeFlame');
      const celebrateText = document.getElementById('celebrateText');
      const balloonContainer = document.getElementById('balloonContainer');
      const confettiContainer = document.getElementById('confettiContainer');

      let hasHat = false;
      let flameLit = true;
      let audioCtx;

      function initAudioCtx() {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
      }

      function playSound(type) {
        try {
          initAudioCtx();
          const oscillator = audioCtx.createOscillator();
          const gainNode = audioCtx.createGain();

          oscillator.connect(gainNode);
          gainNode.connect(audioCtx.destination);
          gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime);

          switch (type) {
            case 'hat':
              oscillator.type = 'sine';
              oscillator.frequency.setValueAtTime(880, audioCtx.currentTime);
              gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.3);
              oscillator.start();
              oscillator.stop(audioCtx.currentTime + 0.3);
              break;
            
            case 'switchPage':
              oscillator.type = 'sine';
              oscillator.frequency.setValueAtTime(660, audioCtx.currentTime);
              oscillator.frequency.setValueAtTime(784, audioCtx.currentTime + 0.2);
              oscillator.frequency.setValueAtTime(1047, audioCtx.currentTime + 0.4);
              gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.6);
              oscillator.start();
              oscillator.stop(audioCtx.currentTime + 0.6);
              break;
            
            case 'blowCandle':
              oscillator.type = 'sine';
              oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
              oscillator.frequency.exponentialRampToValueAtTime(220, audioCtx.currentTime + 1);
              gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
              oscillator.start();
              oscillator.stop(audioCtx.currentTime + 1);
              break;
          }
        } catch (e) {
          console.log('音效初始化需要用户交互，可点击页面后重试');
        }
      }

      function createBalloons() {
        const colors = ['#FF9EBB', '#FFD166', '#9ED2FF', '#FF6B9E', '#A3F7BF'];
        const balloonCount = 15;

        for (let i = 0; i < balloonCount; i++) {
          setTimeout(() => {
            const balloon = document.createElement('div');
            const color = colors[Math.floor(Math.random() * colors.length)];
            const size = Math.random() * 30 + 30;
            const leftPos = Math.random() * 80 + 10;
            const delay = Math.random() * 3;

            balloon.innerHTML = `<i class="fa fa-balloon"></i>`;
            balloon.className = 'absolute animate-balloon';
            balloon.style.color = color;
            balloon.style.fontSize = `${size}px`;
            balloon.style.left = `${leftPos}%`;
            balloon.style.animationDelay = `${delay}s`;
            balloon.style.opacity = '0.85';

            balloonContainer.appendChild(balloon);
            setTimeout(() => balloon.remove(), 10000);
          }, i * 400);
        }
      }

      page1Btn.addEventListener('click', () => {
        if (!hasHat) {
          birthdayHat.style.opacity = '1';
          page1Btn.innerHTML = '吹蜡烛 <i class="fa fa-birthday-cake ml-2"></i>';
          page1Btn.classList.remove('bg-pinkMain', 'hover:bg-pinkDark');
          page1Btn.classList.add('bg-yellow', 'hover:bg-[#FFC833]');
          hasHat = true;
          playSound('hat');
        } else {
          page1.style.opacity = '0';
          playSound('switchPage');
          setTimeout(() => {
            page1.classList.add('hidden');
            page2.classList.remove('hidden');
            setTimeout(() => page2.style.opacity = '1', 100);
          }, 500);
        }
      });

      page2Btn.addEventListener('click', () => {
        if (flameLit) {
          cakeFlame.classList.remove('animate-flame');
          cakeFlame.style.transition = 'all 0.8s ease-out';
          cakeFlame.style.opacity = '0';
          cakeFlame.style.transform = 'translate(-50%, 10px) scale(0.3)';
          flameLit = false;
          playSound('blowCandle');

          page2Btn.disabled = true;
          page2Btn.innerHTML = '蜡烛已吹灭 <i class="fa fa-check ml-2"></i>';
          page2Btn.classList.add('opacity-70', 'cursor-not-allowed');

          setTimeout(() => {
            celebrateText.classList.remove('hidden');
            createConfetti();
          }, 800);
        }
      });

      function createConfetti() {
        const colors = ['#FF9EBB', '#FFD166', '#FF6B9E', '#9ED2FF', '#A3F7BF', '#FFAAA7'];
        const confettiCount = 150;

        for (let i = 0; i < confettiCount; i++) {
          const confetti = document.createElement('div');
          const size = Math.random() * 8 + 4;
          const color = colors[Math.floor(Math.random() * colors.length)];
          const randomX = (Math.random() - 0.5) * 400;
          const randomY = Math.random() * 300 + 100;
          const randomRotate = Math.random() * 360;

          confetti.className = 'absolute animate-confetti';
          confetti.style.width = `${size}px`;
          confetti.style.height = `${size}px`;
          confetti.style.backgroundColor = color;
          confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';
          confetti.style.top = '50%';
          confetti.style.left = '50%';
          confetti.style.setProperty('--random-x', `${randomX}px`);
          confetti.style.setProperty('--random-y', `${randomY}px`);
          confetti.style.setProperty('--random-rotate', `${randomRotate}`);

          confettiContainer.appendChild(confetti);
          setTimeout(() => confetti.remove(), 3000);
        }
      }

      document.body.addEventListener('click', initAudioCtx, { once: true });
      createBalloons();
      setInterval(createBalloons, 8000);
    });
  </script>
</body>
</html>